<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-06 16:06:21
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-13 16:57:51
-->
<template>
  <div class="app-container">
    <div v-pageRoles="['5fae4040076f3']">
      <div class="search">
        <div class="search_left">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="教师姓名">
              <el-input v-model="searchForm.name" placeholder="教师姓名" />
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="searchForm.telephone" type="tel" placeholder="联系方式" />
            </el-form-item>
          </el-form>
        </div>
        <div class="search_right">
          <el-button type="primary" @click="searchList">查询</el-button>
          <el-button type="info" @click="ResetList">重置</el-button>
        </div>
      </div>
      <div class="staffTable">
        <div class="staffTable_button">
          <el-button class="addStaff" icon="el-icon-refresh-right" @click="ResetList">刷新</el-button>
          <el-button v-pageRoles="['5fae404b6b952']" type="primary" class="addStaff" icon="el-icon-plus" @click="toAddStaff">新增员工</el-button>
        </div>

        <el-table
          :data="tableData"
          border
          class="table"
        >
          <el-table-column
            width="50"
            label="序号"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 + pageSize*(currentPage - 1 ) }}
            </template>
          </el-table-column>
          <el-table-column
            label="教师姓名"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.nickname">{{ scope.row.nickname }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="用户名"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.user_name">{{ scope.row.user_name }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            width="70"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.ex.sex">{{ scope.row.ex.sex }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.phone">{{ scope.row.phone }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="身份"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.ex.teachers_identity">{{ scope.row.ex.teachers_identity }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="任教年级"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.ex.grade">{{ scope.row.ex.grade }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="任教科目"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.subject_id">{{ scope.row.subject_id }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="邮箱"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.email">{{ scope.row.email }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.creat_time*1000 | get_YMDHMS }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="230"
            align="center"
          >
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="clickCheckStaff(scope.row)">查看</el-button>
              <el-button v-pageRoles="['5fae40559122d']" size="small" type="success" @click="toEditStaff(scope.row.id)">编辑</el-button>
              <el-button v-pageRoles="['5fae405d3a394']" size="small" type="danger" @click="clickFireStaff(scope.row)">解聘</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottomPagination">
        <el-pagination
          :page-sizes="[10,30,50]"
          :page-size="pageSize"
          :current-page="currentPage"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <fire-staff :visible="fireStaffVisible" :teacher-info="firedTeacherInfo" @closeFireStaff="closeFireStaff" />
      <check-staff :visible="checkStaffVisible" :teacher-info="checkTeacherInfo" @closeCheckStaff="closeCheckStaff" />
    </div>
    <noRolesTips v-noRolesTips="['5fae4040076f3']" />
  </div>
</template>

<script>
import fireStaff from './fireStaff'
import checkStaff from './checkStaff'
import { get_PersonnelList } from '@/api/personnelManagement'
import { formatDate } from '@/utils/getTime'
import noRolesTips from '@/components/noRolesTips'
export default {
    name: 'StaffList',
    components: {
        fireStaff,
        checkStaff,
        noRolesTips
    },
    filters: {
        get_YMDHMS: function(value) {
            if (!value) return ''
            value = formatDate(value)
            return value
        }
    },
    data() {
        return {
            total: 0, // 总数
            pageSize: 10, // 每页条数
            currentPage: 1, // 页数
            fireStaffVisible: false,
            checkStaffVisible: false,
            searchForm: {
                name: '',
                telephone: ''
            },
            tableData: [],
            firedTeacherInfo: {},
            checkTeacherInfo: {}
        }
    },
    created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
    // 初始化渲染页面
        this.getPeopleList()
    },
    methods: {
        async getPeopleList() {
            var queryData = {
                page: this.currentPage,
                pagesize: this.pageSize,
                type: 3
            }
            if (this.searchForm.name != '') {
                queryData.nickname = this.searchForm.name
                console.log('查询名字')
            }
            if (this.searchForm.telephone != '') {
                queryData.phone = this.searchForm.telephone
                console.log('查询电话')
            }
            console.log('查询条件：', this.searchForm, queryData)
            var resData = await get_PersonnelList(queryData)
            console.log('获取用户列表：', resData)
            if (resData.code == 200) {
                this.total = resData.data.total
                this.tableData = resData.data.list
                console.log('tableData', this.tableData)
            }
        },
        searchList() {
            this.currentPage = 1
            this.getPeopleList()
        },
        ResetList() {
            this.searchForm = {
                name: '',
                telephone: ''
            }
            this.currentPage = 1
            this.getPeopleList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getPeopleList()
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
            this.getPeopleList()
        },
        toAddStaff() {
            this.$router.push({ path: '/personnelManagement/addStaff' })
        },
        toEditStaff(id) {
            this.$router.push({ path: '/personnelManagement/editStaff', query: { id: id }})
        },
        clickFireStaff(item) {
            this.firedTeacherInfo = {
                teacher_name: item.nickname,
                username: item.user_name,
                phone: item.phone,
                eamil: item.email,
                teacher_id: item.id
            }
            this.fireStaffVisible = true
        },
        clickCheckStaff(item) {
            this.checkTeacherInfo = {
                teacher_name: item.nickname,
                username: item.user_name,
                phone: item.phone,
                eamil: item.email,
                teacher_id: item.id
            }
            this.checkStaffVisible = true
        },
        closeFireStaff() {
            this.fireStaffVisible = false
        },
        closeCheckStaff() {
            this.checkStaffVisible = false
        }
    }
}
</script>

<style lang="scss" scoped>
.search{
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    .search_left{
         display: flex;
         align-items: center;
          .el-form-item{
           margin-bottom: 0 !important;
      }
    }
     .search_right{
    }
    }
    .staffTable{
        .addStaff{
            margin-top: 20px;
        }
      .table{
          width: 100%;
          margin-top:10px
      }
    }
    .bottomPagination {
    padding: 15px 0;
}
.staffTable_button{
    justify-content: space-between;
    float: right;
    margin-bottom: 20px;
}
</style>
